@import url('css/open-iconic.min.css');

* {margin:0;padding:0;}
html, body, .page {width:100%;height:100%;font-family:'Microsoft YaHei', Helvetica, Arial, sans-serif;font-size:1rem;}
a {text-decoration:none;}
ul {list-style:none;}

.gitee {position:fixed;top:0;right:0;width:60px;height:60px;z-index:99999;}
.gitee img {width:100%;height:100%;}

.row {padding:50px 0;}
.row:after {display:block;content:'';clear:both;}
.col {float:left;}
.code-comment {color:forestgreen;font-style:italic;}

.hero, footer {padding:0 200px;color:#fff;}
header, .hero {background-color:#1c66b9;}

header {height:60px;line-height:60px;position:fixed;top:0;width:100%;z-index:9999;}
nav, .logo {float:left;height:60px;}
.logo img {margin-top:6px;}
nav a {font-weight:bold;font-size:1.3rem;color:#fff;margin-left:15px;}
nav a:hover {color:#fff;}

.hero {position:relative;padding:150px 200px;}
.hero .name {text-align:center;font-weight:bold;font-size:3rem;}
.hero .desc {text-align:center;font-size:1.2rem;padding-top:20px;}
.hero .btns {text-align:center;padding-top:40px;}
.hero .btn {
    font-size:1.5rem;color:#fff;border:1px solid #eee;padding:10px 20px;
    -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
}
.hero .btn:hover {background-color:#fff;color:#000;}

.section {padding:50px 200px;}
.section:after {display:block;content:'';clear:both;}
.install, .picture {float:left;height:360px;}
.install {width:50%;position:relative;}
.install .body {
    border:1px solid #ccc;position:absolute;top:30px;left:30px;right:60px;bottom:30px;padding:30px;overflow:auto;
    -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#000;color:#fff;
}
.install .body h4 {font-size:1.5rem;margin-bottom:20px;}
.install .body pre {font-size:1.2rem;}
.picture {width:50%;padding-top:10px;text-align:center;}
.picture img {width:562px;height:335px;}

footer {background-color:#393d49;}
footer .brand {width:55%;}
footer .links {width:20%;}
footer .desc {padding:0 10px;}
footer ul {padding:10px 0;}
footer ul li {height:30px;line-height:30px;}
footer a {color:#fff;}
.copyright {text-align:center;padding:10px 50px;border-top:1px solid #494d59;}

input {
    outline:none;box-sizing:border-box;font-family:inherit;font-size:inherit;
    border:1.5px solid #ccc;
    -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
}
input:focus {border-bottom:1.5px solid #5bc0de;}

.doc-container {position:absolute;top:60px;left:0;right:0;bottom:0;}
.doc-sider {position:absolute;top:0;left:0;bottom:0;width:200px;border-right:1px solid #ccc;overflow:auto;}
.doc-content {position:absolute;top:0;left:201px;right:0;bottom:0;padding:20px;}

.doc-title {padding:10px;border-bottom:1px solid #ccc;}
.doc-title .title {font-size:1.5rem;font-weight:bold;padding-bottom:10px;}
.doc-title .desc {font-size:1.1rem;color:#888;}

.doc-menu .search {padding:10px;}
.doc-menu input {width:100%;height:30px;line-height:30px;}
.doc-menu .menus {}
.doc-menu .title {font-weight:bold;padding:10px 0 10px 10px;background-color:#f1f1f1;}
.doc-menu ul {padding:10px;}
.doc-menu li {height:40px;line-height:40px;cursor:pointer;}
.doc-menu li a {display:block;color:#000;padding-left:30px;}
.doc-menu li a:hover {color:#1c66b9;}
.doc-menu li.active a {
    background-color:#1c66b9;color:#fff;
    -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
}

@media (max-width: 1200px) {
    header, footer, .section {padding:0 100px;}
}

@media (max-width: 900px) {
    header, footer, .section {padding:0;}
    .hero {padding:80px 30px;}
    .hero .desc {padding:10px 0;text-align:justify;}
    .hero .btns {padding-top:30px;}
    .install, .picture {width:100%;height:290px;}
    .install .body {top:20px;left:10px;right:10px;bottom:10px;}
    .picture {text-align:center;}
    .picture img {width:94%;height:260px;}
    footer .row {padding:20px 0;}
    footer .brand {width:95%;padding:10px;}
    footer .links {width:44%;padding:20px 2px 0 20px;}
}